<template>
  <div ref="investmentBoard" v-loading="loading" :class="[isFullscreen ? 'investmentBoard' : 'investmentBoard screenStyle' ]">
    <!-- 正常 -->
    <span @click="fullscreen(false)"><svg-icon v-if="isFullscreen" icon-class="fullscreen" /></span>
    <!-- 全屏 -->
    <span @click="fullscreen(true)"><svg-icon v-if="!isFullscreen" icon-class="exit-fullscreen" /></span>
    <div class="times">
      <span class="time">{{ nowTime }}</span>
      <span class="date">{{ nowDate }}</span>
    </div>
    <h2>{{ $t('投资数据看板') }}</h2>

    <el-row class="outer-row" :gutter="30">
      <el-col :span="6" class="col-side">
        <div class="boxall box-top">
          <ul class="">
            <li>
              <div class="name">{{ $t('累计投资项目金额') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(dealIndicators.investDealFkAmountTotal, 'w') + $t('万')">{{ moneyFormats(dealIndicators.investDealFkAmountTotal, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('当年新增投资金额') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(dealIndicators.currentYearFkAmountTotal, 'w') + $t('万')">{{ moneyFormats(dealIndicators.currentYearFkAmountTotal, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('累计投资项目个数') }}</div>
              <div class="money">
                <span style="color: #e9f615">{{ dealIndicators.investDealCount }}</span>
                <span>{{ $t('个') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('当年新增投资个数') }}</div>
              <div class="money">
                <span style="color: #e9f615">{{ dealIndicators.currentNewInvestCount }}</span>
                <span>{{ $t('个') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('在投项目估值') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(dealIndicators.investDealGzAmountTotal, 'w') + $t('万')">{{ moneyFormats(dealIndicators.investDealGzAmountTotal, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('当年项目回款金额') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(dealIndicators.currentYearHkAmountTotal, 'w') + $t('万')">{{ moneyFormats(dealIndicators.currentYearHkAmountTotal, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="boxall">
          <el-select v-model="investmentType" size="mini" filterable class="select-deal" @change="changeInvestType">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            />
          </el-select>
          <div class="el-chart">
            <span class="chartTit">{{ $t('投资类型') }}</span>
            <div class="position">
              <investmentType ref="investmentType" class="position" :chart-data="investTypeData" @clickInvestType="clickInvestType" />
            </div>
          </div>
        </div>
        <div class="boxall">
          <dict-select
            v-model="stageType"
            dictionary="deal_type"
            :clearable="false"
            size="mini"
            class="select-deal"
            @change="getDealStageChart"
          />
          <div class="el-chart">
            <span class="chartTit">{{ $t('项目阶段统计') }}</span>
            <DealState ref="DealState" class="position" :chart-data="stageData" @clickDealState="clickDealState" />
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="col-center">
        <div class="boxall center-top bigBox">
          <div class="el-chart">
            <span class="chartTit">{{ $t('各省项目数量') }}</span>
            <provincialProjects ref="provincialProjects" :chart-data="provinceData" class="position" @clickDealProvince="clickDealProvince" />
          </div>
        </div>
        <div class="boxall noBor">
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="boxall">
                <div class="el-chart">
                  <span class="chartTit">{{ $t('新增投资情况') }}</span>
                  <div class="tableArea">
                    <el-table v-loading="loading" v-el-table-infinite-scroll="investmentSituationLoadMore" tooltip-effect="darkTable" :data="investmentSituationList" class="table1" size="mini" height="100%">
                      <!-- <el-table-column :label="$t('序号')" type="index" align="center" width="50">
                        <template slot-scope="scope">
                          {{ scope.$index + 1 }}
                        </template>
                      </el-table-column> -->
                      <el-table-column :label="$t('项目名称')" align="center" prop="dealBase.dealName" show-overflow-tooltip>
                        <template slot-scope="scope">
                          <router-link
                            target="_blank"
                            :to="{ path:'/deal/home/dealBaseHome', query: { id: scope.row.dealId, dealType: scope.row.dealType, companyId: scope.row.dealBase.companyId, menuKey: 'deal_after' }}"
                            class="link_a fontColor"
                          >{{ scope.row.dealBase.dealName }}</router-link>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('投资时间')" align="center" prop="operateDate" show-overflow-tooltip width="90">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.operateDate) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('投资金额') + $t('金额单位')" align="center" prop="operateAmount" show-overflow-tooltip width="95">
                        <template slot-scope="scope">
                          <span class="link-type" @click="viewDealCashFlowHandle(scope.row)">{{ moneyFormat(scope.row.operateAmount, 'w') }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>

                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="boxall">
                <div class="el-chart">
                  <span class="chartTit">{{ $t('新增回款情况') }}</span>
                  <div class="tableArea">
                    <el-table v-loading="loading" v-el-table-infinite-scroll="collectionSituationLoadMore" tooltip-effect="darkTable" :data="collectionSituationList" class="table1" size="mini" height="100%">
                      <!-- <el-table-column :label="$t('序号')" type="index" align="center" width="50">
                        <template slot-scope="scope">
                          {{ scope.$index + 1 }}
                        </template>
                      </el-table-column> -->
                      <el-table-column :label="$t('项目名称')" align="center" prop="dealBase.dealName" show-overflow-tooltip>
                        <template slot-scope="scope">
                          <router-link
                            target="_blank"
                            :to="{ path:'/deal/home/dealBaseHome', query: { id: scope.row.dealId, dealType: scope.row.dealType, companyId: scope.row.dealBase.companyId, menuKey: 'deal_after' }}"
                            class="link_a fontColor"
                          >{{ scope.row.dealBase.dealName }}</router-link>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('回款时间')" align="center" prop="operateDate" show-overflow-tooltip width="90">
                        <template slot-scope="scope">
                          <span>{{ parseTime(scope.row.operateDate) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('回款金额') + $t('金额单位')" align="center" prop="operateAmount" show-overflow-tooltip width="95">
                        <template slot-scope="scope">
                          <span class="link-type" @click="viewDealCashFlowHandle(scope.row)">{{ moneyFormat(scope.row.operateAmount, 'w') }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="boxall bigBox">
          <div class="el-chart">
            <span class="chartTit">{{ $t('基金业绩情况') }}</span>
            <div class="tableArea">
              <el-table v-loading="loading" v-el-table-infinite-scroll="fundPerformanceLoadMore" tooltip-effect="darkTable" :data="fundPerformanceList" class="table1" size="mini" height="100%">
                <el-table-column :label="$t('序号')" type="index" align="center" width="50">
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('基金简称')" align="center" prop="fundName" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <router-link
                      target="_blank"
                      :to="{ path:'/fund/fundBasehome', query: { id: scope.row.fundId }}"
                      class="link_a fontColor"
                    >{{ scope.row.fundName }}</router-link>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('基金规模') + $t('金额单位')" align="center" prop="subscribedAmount" show-overflow-tooltip width="100">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.subscribedAmount, 'w') }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('TVPI')" align="center" prop="tvpi" show-overflow-tooltip width="70">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.tvpi) }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('RVPI')" align="center" prop="rvpi" show-overflow-tooltip width="70">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.rvpi) }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('DPI')" align="center" prop="dpi" show-overflow-tooltip width="70">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.rvpi) }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('Gross IRR')" align="center" prop="irr" show-overflow-tooltip width="90">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.irr) }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('Net IRR')" align="center" prop="net_irr" show-overflow-tooltip width="80">
                  <template slot-scope="scope">
                    <span>{{ moneyFormat(scope.row.net_irr) }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="col-side">
        <div class="boxall box-top">
          <ul class="">
            <li>
              <div class="name">{{ $t('在管基金个数') }}</div>
              <div class="money">
                <span style="color: #e9f615">{{ fundIndicators.fundCount }}</span>
                <span>{{ $t('个') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('在管基金估值') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(fundIndicators.fundValuation, 'w') + $t('万')">{{ moneyFormats(fundIndicators.fundValuation, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('在管基金规模') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(fundIndicators.fundSubscribedAmount, 'w') + $t('万')">{{ moneyFormats(fundIndicators.fundSubscribedAmount, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('当年收取管理费') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(fundIndicators.currentFundManagerFee, 'w') + $t('万')">{{ moneyFormats(fundIndicators.currentFundManagerFee, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('基金实缴金额') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(fundIndicators.fundAccumulatedPaidMount, 'w') + $t('万')">{{ moneyFormats(fundIndicators.fundAccumulatedPaidMount, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
            <li>
              <div class="name">{{ $t('当年基金费用') }}</div>
              <div class="money">
                <span style="color: #e9f615" :title="moneyFormats(fundIndicators.currentFundFee, 'w') + $t('万')">{{ moneyFormats(fundIndicators.currentFundFee, 'w') }}</span>
                <span>{{ $t('万') }}</span>
              </div>
            </li>
          </ul>

        </div>
        <div class="boxall">
          <el-select v-model="dealIndustry" size="mini" filterable class="select-deal" clearable>
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            />
          </el-select>
          <div class="el-chart">
            <span class="chartTit">{{ $t('项目行业分布') }}</span>
            <DealIndustry ref="DealIndustry" class="position" :chart-data="industryData" :deal-industry="dealIndustry" style="top: 40px;" @clickIndustry="clickIndustry" />
          </div>

        </div>
        <div class="boxall">
          <el-select v-model="paramDealType" size="mini" filterable class="select-deal" clearable @change="changeDealType">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            />
          </el-select>
          <div class="el-chart">
            <span class="chartTit lt">{{ $t('项目类型占比') }}</span>
            <DealType ref="DealType" class="position" :chart-data="dealTypeData" @clickDealType="clickDealType" />
          </div>

        </div>
      </el-col>
    </el-row>
    <!-- 添加或修改基金管理费对话框 -->
    <el-dialog :title="title" :visible.sync="listOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogView" append-to-body>
      <dealInvestBorardList ref="dealInvestBorardList" />
    </el-dialog>
    <!-- 添加或修改基金管理费对话框 -->
    <el-dialog :title="stateTitle" :visible.sync="stateOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogView" append-to-body>
      <dealStateBorardList ref="dealStateBorardList" />
    </el-dialog>

    <!-- 添加或修改项目现金流对话框 -->
    <el-dialog :title="$t('项目现金流')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealCashflowForm ref="dealCashflowForm" :btn-show="false" />
    </el-dialog>
  </div>
</template>
<script>
import DealType from './investmentChart/dealType'
import DealState from './investmentChart/dealState'
import DealIndustry from './investmentChart/dealIndustry'
import provincialProjects from './investmentChart/provincialProjects'
import investmentType from './investmentChart/investmentType'
import {
  countDealStageBoard,
  dealIndicatorsDetails,
  getDealIndustryTypeChart,
  getDealProvinceData, getDealTypeDataChart,
  getInvestTypeChartData
} from '@/api/base/deal/dealBase'
import { fundIndicatorsDetails, fundPerformanceList } from '@/api/fund/fundBase'
import dealInvestBorardList from '@/views/deal/report/dealInvestBoardView/dealInvestBorardList.vue'
import { dealCashListByBoard } from '@/api/deal/cashflow/dealCashflow'
import dealStateBorardList from '@/views/deal/report/dealInvestBoardView/dealStateBorardList.vue'
import dealCashflowForm from '@/views/deal/cashflow/dealCashflowForm.vue'
import elTableInfiniteScroll from 'el-table-infinite-scroll'
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  components: {
    dealCashflowForm,
    DealType,
    DealState,
    DealIndustry,
    provincialProjects,
    investmentType,
    dealInvestBorardList,
    dealStateBorardList
  },
  data() {
    return {
      nowTime: '',
      nowDate: '',
      title: '',
      stateTitle: '',
      stateOpen: false,
      // 现金流表单
      formOpen: false,
      stageType: 'equity',
      investmentType: 'investCost',
      dealIndustry: undefined,
      paramDealType: undefined,
      // 各省项目数量
      provinceData: [],
      // 股权投资数量
      stageData: [],
      // 项目行业分布
      industryData: [],
      // 项目类型占比
      dealTypeData: [],
      // 投资类型数量
      investTypeData: [],
      // 项目指标数据
      dealIndicators: {},
      // 基金指标数据
      fundIndicators: {},
      loading: false,
      listOpen: false,
      isFullscreen: true,
      // 投资情况
      investmentSituationList: [],
      // 回款情况
      collectionSituationList: [],
      // 基金业绩
      fundPerformanceList: [],
      selectOptions: [
        { label: '投资成本', value: 'investCost' },
        { label: '最新估值', value: 'valuation' },
        { label: '回款金额', value: 'receivedAmount' },
        { label: '项目数量', value: 'dealNumber' }
      ],
      // 新增回款情况查询数据参数
      investCashHkParam: {
        operateType: 'HK',
        pageNum: 1,
        pageSize: 10
      },
      // 新增投资情况查询数据参数
      investCashFkParam: {
        operateType: 'FK',
        pageNum: 1,
        pageSize: 10
      },
      // 基金业绩情况查询数据参数
      performanceParams: {
        pageNum: 1,
        pageSize: 10
      },
      investmentSituationDisabled: false,
      collectionSituationDisabled: false,
      fundPerformanceDisabled: false
    }
  },
  computed: {
  },
  created() {
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.load()
      })()
    }
    this.$nextTick(() => {
      this.load()
    })
    this.initData()
    setInterval(this.updateTime, 1000)
  },
  methods: {
    moneyFormats(number, unit) {
      var val = +(parseFloat(number)).toFixed()
      if (unit === 'w') {
        val = val / 10000
      }
      return (val).toLocaleString('zh', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    },
    updateTime() {
      var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      var cd = new Date()
      this.nowTime = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2)
      this.nowDate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()]
    },

    zeroPadding(num, digit) {
        var zero = ''
        for (var i = 0; i < digit; i++) {
            zero += '0'
        }
        return (zero + num).slice(-digit)
    },
    fullscreen(is) {
      this.isFullscreen = is
      this.load()
    },
    load() {
      // this.initData()
      this.$nextTick(() => {
        var obj = {}
        for (obj in this.$refs) {
          if (this.$refs[obj]?.initChart !== undefined) {
            this.$refs[obj].initChart()
            this.$refs[obj].chart.resize()
            this.$refs[obj].$_resizeHandler()
          }
        }
      })
    },
    // 初始化数据
    initData() {
      // 获取项目指标数据（看板左上角）
      this.getDealIndicators()
      // 获取基金指标数据（看板右上角）
      this.getFundIndicators()
      // 获取各省项目数量（中上）
      this.getProvinceIndicators()
      // 获取投资类型图表数据（左中）
      this.getInvestTypeChart()
      // 获取项目类型占比图表数据（右中）
      this.getIndustryTypeChart()
      // 获取项目类型占比图表数据（右下）
      this.getDealTypeChart()
      // 获取项目新增投资情况（中中左列表）
      this.getInvestCashFkList()
      // 获取项目新增回款情况（中中右列表）
      this.getInvestCashHkList()
      // 获取项目阶段统计（左下）
      this.getDealStageChart('equity')
      // 获取基金业绩情况（左下）
      this.getFundPerformanceList()
    },
    // 获取项目指标数据（左上角）
    getDealIndicators() {
      dealIndicatorsDetails().then(response => {
        this.dealIndicators = response.data
      })
    },
    // 获取基金指标数据（右上角）
    getFundIndicators() {
      fundIndicatorsDetails().then(response => {
        this.fundIndicators = response.data
      })
    },
    // 获取各省项目数量（中上）
    getProvinceIndicators() {
      getDealProvinceData().then(response => {
        this.provinceData = response.data
      })
    },
    // 获取项目行业分布图表数据（右中）
    getIndustryTypeChart() {
      getDealIndustryTypeChart().then(response => {
        this.industryData = response.data
        this.dealIndustry = 'investCost'
      })
    },
    // 获取项目类型占比图表数据（右下）
    getDealTypeChart() {
      getDealTypeDataChart().then(response => {
        this.dealTypeData = response.data
        this.paramDealType = 'investCost'
        this.changeDealType()
      })
    },
    changeDealType() {
      if (this.paramDealType === 'investCost') {
        this.dealTypeData = this.dealTypeData.map((item) => {
          return {
            name: this.$t(item.dealTypeLabel),
            dealTypeLabel: item.dealTypeLabel,
            value: item.fk,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            paramDealType: this.paramDealType,
            dealType: item.dealType
          }
        })
      } else if (this.paramDealType === 'valuation') {
        this.dealTypeData = this.dealTypeData.map((item) => {
          return {
            name: this.$t(item.dealTypeLabel),
            dealTypeLabel: item.dealTypeLabel,
            value: item.gz,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            paramDealType: this.paramDealType,
            dealType: item.dealType
          }
        })
      } else if (this.paramDealType === 'receivedAmount') {
        this.dealTypeData = this.dealTypeData.map((item) => {
          return {
            name: this.$t(item.dealTypeLabel),
            dealTypeLabel: item.dealTypeLabel,
            value: item.hk,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            paramDealType: this.paramDealType,
            dealType: item.dealType
          }
        })
      } else if (this.paramDealType === 'dealNumber') {
        this.dealTypeData = this.dealTypeData.map((item) => {
          return {
            name: this.$t(item.dealTypeLabel),
            dealTypeLabel: item.dealTypeLabel,
            value: item.dealCount,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            paramDealType: this.paramDealType,
            dealType: item.dealType
          }
        })
      }
    },
    // 获取项目新增投资情况（中中左列表）
    getInvestCashFkList() {
      this.investmentSituationDisabled = true
      dealCashListByBoard(this.investCashFkParam).then(response => {
        this.investCashFkParam.total = response.total
        this.investmentSituationList = this.investmentSituationList.concat(response.rows)
        this.investmentSituationDisabled = false
      })
    },
    investmentSituationLoadMore() {
      if (!this.investmentSituationDisabled) {
        this.investmentSituationDisabled = true
        if (this.investCashFkParam.pageNum * this.investCashFkParam.pageSize < this.investCashFkParam.total) {
          this.investCashFkParam.pageNum++
          this.getInvestCashFkList()
        } else {
          console.log('已加载完所有的数据！')
          this.investmentSituationDisabled = false
        }
      }
    },
    // 获取项目新增回款情况（中中右列表）
    getInvestCashHkList() {
      this.collectionSituationDisabled = true
      dealCashListByBoard(this.investCashHkParam).then(response => {
        this.investCashHkParam.total = response.total
        this.collectionSituationList = this.collectionSituationList.concat(response.rows)
        this.collectionSituationDisabled = false
      })
    },
    collectionSituationLoadMore() {
      if (!this.collectionSituationDisabled) {
        this.collectionSituationDisabled = true
        if (this.investCashHkParam.pageNum * this.investCashHkParam.pageSize < this.investCashHkParam.total) {
          this.investCashHkParam.pageNum++
          this.getInvestCashHkList()
        } else {
          console.log('已加载完所有的数据！')
          this.collectionSituationDisabled = false
        }
      }
    },
    // 获取基金业绩情况列表（中下列表）
    getFundPerformanceList() {
      this.fundPerformanceDisabled = true
      fundPerformanceList(this.performanceParams).then(response => {
        this.performanceParams.total = response.total
        this.fundPerformanceList = this.fundPerformanceList.concat(response.rows)
        this.fundPerformanceDisabled = false
      })
    },
    fundPerformanceLoadMore() {
      if (!this.fundPerformanceDisabled) {
        this.fundPerformanceDisabled = true
        if (this.performanceParams.pageNum * this.performanceParams.pageSize < this.performanceParams.total) {
          this.performanceParams.pageNum++
          this.getFundPerformanceList()
        } else {
          console.log('已加载完所有的数据！')
          this.fundPerformanceDisabled = false
        }
      }
    },
    // 获取投资类型图表数据（左中）
    getInvestTypeChart() {
      getInvestTypeChartData().then(response => {
        this.investTypeData = response.data
        this.investmentType = 'investCost'
        this.changeInvestType()
      })
    },
    changeInvestType() {
      // 投资成本:investCost;最新估值:valuation;回款金额:receivedAmount;项目数量:dealNumber
      // 项目数量:dealCount 投资成本：fk 回款金额：hk  最新估值：gz
      if (this.investmentType === 'investCost') {
        this.investTypeData = this.investTypeData.map((item) => {
          return {
            name: this.$t(item.name),
            value: item.fk,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            type: item.type
          }
        })
      } else if (this.investmentType === 'valuation') {
        this.investTypeData = this.investTypeData.map((item) => {
          return {
            name: this.$t(item.name),
            value: item.gz,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            type: item.type
          }
        })
      } else if (this.investmentType === 'receivedAmount') {
        this.investTypeData = this.investTypeData.map((item) => {
          return {
            name: this.$t(item.name),
            value: item.hk,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            type: item.type
          }
        })
      } else if (this.investmentType === 'dealNumber') {
        this.investTypeData = this.investTypeData.map((item) => {
          return {
            name: this.$t(item.name),
            value: item.dealCount,
            dealCount: item.dealCount,
            fk: item.fk,
            gz: item.gz,
            hk: item.hk,
            type: item.type
          }
        })
      }
    },
    // 获取项目阶段统计（左下）
    getDealStageChart(stageType) {
      const param = {
        stageType: stageType
      }
      countDealStageBoard(param).then(response => {
        this.stageData = response.data
        if (this.stageData) {
          this.stageData.forEach(item => {
            item.nodeName = this.$t(item.nodeName)
          })
        } else {
          this.stageData = []
        }
      })
    },

    // 点击省份弹窗处理
    clickDealProvince(data) {
      this.title = data.provinceName
      this.listOpen = true
      this.$nextTick(() => {
        const param = {
          provinceId: data.provinceId,
          provinceName: data.provinceName,
          type: 'province'
        }
        // 调用List页面的 dealInvestBorardList 方法初始化数据
        this.$refs.dealInvestBorardList.getList(param)
      })
    },
    // 点击投资类型扇形图类型弹窗处理
    clickInvestType(data) {
      this.title = data.name
      this.listOpen = true
      this.$nextTick(() => {
        const param = {
          investmentType: data.type,
          type: 'investType'
        }
        // 调用List页面的 dealInvestBorardList 方法初始化数据
        this.$refs.dealInvestBorardList.getList(param)
      })
    },
    // 点击项目行业分布扇形图类型弹窗处理
    clickIndustry(data) {
      this.title = data.name
      this.listOpen = true
      this.$nextTick(() => {
        const param = {
          industryFirst: data.industryFirst,
          type: 'industryType'
        }
        // 调用List页面的 dealInvestBorardList 方法初始化数据
        this.$refs.dealInvestBorardList.getList(param)
      })
    },
    // 点击项目行业分布扇形图类型弹窗处理
    clickDealType(data) {
      this.title = data.name
      this.listOpen = true
      this.$nextTick(() => {
        const param = {
          dealType: data.dealType,
          paramDealType: data.paramDealType,
          type: 'dealType'
        }
        // 调用List页面的 dealInvestBorardList 方法初始化数据
        this.$refs.dealInvestBorardList.getList(param)
      })
    },
    // 点击项目行业分布扇形图类型弹窗处理
    clickDealState(data) {
      this.stateTitle = data.name
      this.stateOpen = true
      this.$nextTick(() => {
        const param = {
          nodeId: data.nodeId,
          stageType: this.stageType
        }
        // 调用List页面的 dealInvestBorardList 方法初始化数据
        this.$refs.dealStateBorardList.getList(param)
      })
    },
    /** 新增投资情况、新增回款情况点击投资金额、回款金额，查看项目现金流 */
    viewDealCashFlowHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealCashflowForm.init(row)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.fontColor{
  color: #fff!important;
}
.times{
  position: absolute;
  left: 10px;
  top: 10px;
  color: #fff;
  font-size: 13px;
  .time{
    font-size: 18px;
    margin-right: 10px;
    text-shadow: 0 0 20px white, 0 0 20px white;
    font-weight: 400;
  }
}
.select-deal{
  width: 100px;
  position: absolute!important;
  right: 7px;
  top: 25px;
  z-index: 9999;
  /deep/input{
    background-color: transparent;
    border: 1px solid #0270c7;
    color: #fff;
  }
  /deep/.el-select__caret{
    color: #fff;
  }
}
.el-chart{
  height: 100%;
  position: relative;
  .position{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
}
/deep/.table1.el-table{
  background-color: transparent !important;
  color: #fff;
  border-right: 0;
  .el-table__header th {
    background-color: rgba(38,108,252, 0.4)!important;
    color: #52ffff !important;
  }
  .el-table__header tr {
    background-color: transparent;
  }
  .el-table__body tr {
    background-color: rgba(38,108, 252, 0.2);
    td{
      color: #fff;
      border-right-color: transparent!important;
      .link-type{
        color: #52ffff !important;
      }
    }
  }
  th.el-table__cell.is-leaf, td.el-table__cell {
    border-bottom: 1px solid #011748!important;
  }
  .el-table__body tr:hover>td.el-table__cell {
    background-color: transparent;
  }
  &::before {
    background-color: #011748;
  }
}
.investmentBoard{
  ::-webkit-scrollbar-thumb {
    background: rgba(82, 255, 255, 0.4);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent!important;
  }

  ::-webkit-scrollbar-track-piece {
    background: transparent!important;
  }

}
.tableArea{
  height: 83%;
  padding: 10px;
  width: 100%;
}
.screenStyle {
  z-index: 2000!important;
}
</style>
